<template>
<div class=''>
    <div align="center">
			<div id="one">
			<ul style="display: -webkit-flex;">
				<li>
					<h2>发动机品牌</h2></li>
				<li>
					<el-button type="success" id="xy" @click="dialogFormVisible = true">添加品牌</el-button>
				</li>
			</ul>
			</div>
			<el-dialog title="添加品牌" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-row :gutter="10">
										<el-col :span="12">
											<el-form-item label="添加品牌编号" :label-width="formLabelWidth">
												<el-input v-model="form.enginetypeid" autocomplete="off"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="添加品牌名称" :label-width="formLabelWidth">
												<el-input v-model="form.enginetypename" autocomplete="off"></el-input>
											</el-form-item>
										</el-col>
									</el-row>	
					</el-form-item>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="add()">确定添加</el-button>
				</div>
			</el-dialog>
			<el-dialog title="修改品牌" :visible.sync="dialogFormVisible2">
				<el-form :model="form">
					<el-form-item label="添加品牌编码" :label-width="formLabelWidth">
						<el-input v-model="Onepp.enginetypeid" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="添加品牌名称" :label-width="formLabelWidth">
						<el-input v-model="Onepp.enginetypename" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible2  = false">取 消</el-button>
					<el-button type="primary" @click="handleEdit(Onepp.enginetypeid)">确定修改</el-button>
				</div>
			</el-dialog>
			<template>
				<el-table :data="tableData.list.filter(data => !search || data.enginetypename.toLowerCase().includes(search.toLowerCase()))" style="width: 60%">
					<el-table-column label="序号">
						<template slot-scope="temp">
							{{temp.$index+1}}
						</template>
					</el-table-column>
					
					<el-table-column label="发动机品牌编号" prop="enginetypeid">
					</el-table-column>
					
					<el-table-column label="发动机品牌名称" prop="enginetypename">
					</el-table-column>
					<el-table-column align="right">
						<template slot="header" slot-scope="">
							<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
						</template>
						<template slot-scope="scope">
							<i class=""></i>
							<el-button icon="el-icon-s-tools" type="primary" size="mini" @click="update(scope.row.enginetypeid)">修改</el-button>
							<el-button icon="el-icon-delete-solid" size="mini" type="danger" @click="handleDelete(scope.row.enginetypeid)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.pageNum" :page-sizes="[3, 4, 5]" :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
					</el-pagination>
				</div>

			</template>
		</div>
</div>
</template>

<script>
export default {
data() {
//这里存放数据
return {
dialogFormVisible: false,
				dialogFormVisible2: false,
				form: {
					enginetypeid: '',
					enginetypename: ''
				},
				formLabelWidth: '100px',
				tableData: {},
				Onepp:{},
				search: ''
};
},
//计算属性
computed: {},
//方法集合
methods: {
handleSizeChange(val) {
						this.Query(this.tableData.pageNum, val);
					},
					handleCurrentChange(val) {
						console.log(`当前页: ${val}`);
						this.Query(val, this.tableData.pageSize);
					},
					handleDelete( index) {
						let _this = this;
						if (window.confirm('是否删除该品牌?')) {
							this.$http.delete(`http://127.0.0.1:8080/api/pp/del/${index}`).then(resp => {
								if (resp.data.code == "200") {
                                    
									alert('删除成功');
									this.Query(1, 3);
								}
							});
						}
					},
					update(i){
						localStorage.setItem("id",i);
						this.dialogFormVisible2=true;
						let _this = this;
						this.$http.get(`http://localhost:8080/api/pp/One/${i}`).then(resp => {
							let rsdata = resp.data;
							//console.info(rsdata);
							_this.Onepp = rsdata;
						});
					},
					add() {
						let _this = this;
						if (this.form.enginetypeid == "" || this.form.enginetypename == "") {
							alert("填写信息不能为空！");
							return;
						}
						this.$http.post('http://127.0.0.1:8080/api/pp/add', this.form).then(resp => {
							if (resp.data.code == "200") {
                                 _this. dialogFormVisible= false;
								alert("新增成功");
								_this.form = {
									enginetypeid: "",
									enginetypename: ""
								};
								_this.Query(1, 3);
							}
						});
					},
					Query(p, s) {
						let _this = this;
						this.$http.get(`http://localhost:8080/api/pp/${p}/${s}`).then(resp => {
							let rsdata = resp.data;
							//console.info(rsdata);
							_this.tableData = rsdata;
						});
					},
					handleEdit(i) {
                        let _this = this;
						var id=localStorage.getItem("id")
						this.$http.put(`http://127.0.0.1:8080/api/pp/update/${id}`, this.Onepp).then(function(resp) {
						if(resp.data.code == "200") {
                           _this. dialogFormVisible2= false;
							alert("修改品牌成功！")
							_this.Query(1, 3);
						}
					});
				
					}
},
//挂载完成（可以访问DOM元素）
mounted() {
this.Query(1, 3);
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
ul>li {
			display: inline;
		}
		
		ul {
			list-style: none;
		}
			#one {
			width: 300px;
			height: 100px;
		}
		#xy{
			margin-top:20px ;
		}
		.dialog-footer{
			top: 200px;
		}
</style>